<template>
  <div>
    <!-- <div class="toptitle">角色列表</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称：">
        <el-input v-model="formInline.user" placeholder></el-input>
      </el-form-item>
      <el-form-item label="账号分类：">
        <el-select v-model="formInline.region1">
          <el-option label="全部" value></el-option>
          <el-option label="超级管理员账号" value="1"></el-option>
          <el-option label="普通应用账号" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增角色</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      </el-form-item>-->
      <!-- <el-form-item>
        <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增</el-button>
      </el-form-item>-->
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="name" label="角色分类">
        <template slot-scope="scope">
          <span v-if="scope.row.roleType===1">超级管理账号</span>
          <span v-if="scope.row.roleType===2">普通应用账号</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">{{scope.row.status===0?'禁用':'启用'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="350" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="primary"
            size="small"
            v-if="scope.row.status===0"
          >启用</el-button>
          <el-button size="mini" @click="edit(scope.row)" type="primary">编辑</el-button>
          <el-button
            @click="handledelete(scope.row)"
            type="danger"
            size="mini"
            v-if="scope.row.roleType===2"
          >删除</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleClick(scope.row)"
            v-if="scope.row.status===1&&scope.row.roleType===2"
          >禁用</el-button>
          <el-button @click="selectradio(scope.row)" size="mini" type="primary">菜单分配</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="角色分类" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择角色分类">
            <el-option label="超级管理账号" value="1"></el-option>
            <el-option label="普通应用账号" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="state">
          <el-select v-model="ruleForm.state">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色说明" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
      <span>确认删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleone = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sure()" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleorg" width="37%" style="height:1500px">
      <div>
        <el-tree
          :data="data"
          ref="tree"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @check-change="handleCheckChange"
          check-strictly
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleorg = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="onSubmit()" size="mini">确定分配权限</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  rolemanage,
  usebutton,
  rolemanagetwo,
  addrole,
  deleterole,
  updaterole,
  getshu,
  setlimit
} from "@/api/platformmanage";
import { getmemberorg } from "@/api/organaz";
import qs from "qs";
export default {
  data() {
    return {
      data: [],
      loading: true,
      dialogVisibleorg: false,
      formInline: {
        region1: ""
      },
      data5: [],
      data3: [],
      data4: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      ruleForm: {
        name: "",
        region: "",
        sec: "",
        desc: "",
        state: ""
      },
      checkedarr: [],
      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      formInline: {
        user: "",
        region: ""
      },
      arrone: [],
      tableData: [],
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择角色分类", trigger: "blur" }
        ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.rolemanageone();
    this.getrolemanage();
  },
  methods: {
    kong() {
      this.formInline.user = "";
      this.formInline.region1 = "";
    },

    search() {
      let data = {
        roleName: this.formInline.user,
        roleType: this.formInline.region1
      };

      //  };
      rolemanagetwo(data).then(res => {
        this.tableData = res.records;
      });
    },

    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];

      res.forEach(item => {
        arr.push(item.id);
        this.arrid.push(item.id);
        this.arrone = arr;
        console.log(this.arrone, "ll2");
      });
    },

    handledelete(v) {
      this.roleid = v.roleId;

      //   this.dialogVisibleone = true;
      let data = {
        roleId: this.roleid
      };
      this.$confirm("确认删除吗？").then(_ => {
        deleterole(qs.stringify(data)).then(res => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.rolemanageone();
          this.dialogVisibleone = false;
        });
      });
    },

    add() {
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      this.ruleForm.name = v.roleName;
      this.ruleForm.region = String(v.roleType);
      console.log(typeof v.roleType, "oioi");
      this.ruleForm.sec = v.comments;
      this.ruleForm.desc = v.roleDesc;
      this.ruleForm.roleId = v.roleId;
      this.ruleForm.state = String(v.status);
      console.log(v, "pp");
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (this.ruleForm.name == "" || this.ruleForm.name == null) {
        this.$message.error("请输入角色名称");
        return;
      }
      if (this.ruleForm.region == "" || this.ruleForm.region == null) {
        this.$message.error("请输入角色分类");
        return;
      }
      if (this.ruleForm.state == "" || this.ruleForm.state == null) {
        this.$message.error("请选择状态");
        return;
      }
      if (this.editflag) {
        //   var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          roleId: "",
          roleName: this.ruleForm.name,
          roleType: this.ruleForm.region,
          comments: this.ruleForm.sec,
          roleDesc: this.ruleForm.desc,
          status: this.ruleForm.state,
          createUser: userId
        };
        addrole(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.rolemanageone();
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          roleId: this.ruleForm.roleId,
          roleName: this.ruleForm.name,
          roleType: this.ruleForm.region,
          comments: this.ruleForm.sec,
          roleDesc: this.ruleForm.desc,
          status: this.ruleForm.state,
          createUser: userId
        };
        updaterole(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.rolemanageone();
        });
      }
    },

    handleClick(v) {
      if (v.status === 0) {
        var uuid = 1;
      } else if (v.status === 1) {
        var uuid = 0;
      }
      let data = { roleId: v.roleId, status: uuid };
      usebutton(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.rolemanageone();
      });
    },
    rolemanageone() {
      rolemanage({}).then(res => {
        (this.loading = false), (this.tableData = res.records);
        console.log(res, "ppe");
      });
    },
    selectradio(v) {
      console.log(v, "opop");
      this.dialogVisibleorg = !this.dialogVisibleorg;

      var zTreeAsyncTest = "zTreeAsyncTest";
      this.roleId = v.roleId;
      let data = {
        roleId: v.roleId,
        // appId: this.formInline.region,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        // res.records.forEach((item, i) => {
        //   this.options.push({ value: item.orgSeq, label: item.orgName });
        // });

        this.loading = false;
        this.total = res.total;
        this.data = res.records;
        console.log(this.data, "ppe");
      });
    },
    setCheckedNodes(v) {
      console.log(v, "ppp");
    },
    onSubmit() {
      console.log(this.rolefenid, "pfl");
      //   this.data5 = [];
      //   this.data5.push(this.rolefenid);

      let data = {
        roleId: this.roleId,
        // appId: this.formInline.region,
        menuIds: this.arrone
      };
      setlimit(data).then(res => {
        this.$message({
          showClose: true,
          message: "新增角色菜单关联关系成功",
          type: "success"
        });
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.dialogVisibletwo = false;
      });
    },

    getVendorId(v) {
      this.formInline.region = v;
      console.log(v, "lll");
      this._getshu();
    },
    _getshu() {
      var zTreeAsyncTest = "zTreeAsyncTest";
      let data = {
        roleId: "",
        // appId: this.formInline.region,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        this.records = res.records;
        var arr = res.records;
        var father = [],
          children = [],
          sanmenu = [];
        arr.forEach(item => {
          if (item.resourceLevel == 1) {
            item.sub = [];
            father.push(item);
          } else if (item.resourceLevel == 2) {
            children.push(item);
          }
        });
        for (var i = 0; i < father.length; i++) {
          for (var j = 0; j < children.length; j++) {
            if (father[i].id == children[j].pid) {
              if (!father[i].sub.length) {
                father[i].sub.push(children[j]);
                sanmenu.push(father[i]);
              } else {
                father[i].sub.push(children[j]);
              }
            }
          }
        }
        this.data4 = sanmenu;
        console.log(this.sanmenu, "pppppq");
        sanmenu.map((item, i) => {
          console.log(item, "jjj");
        });
      });
    },

    getrolemanage() {
      rolemanage().then(res => {
        this.tableData = res.records;
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    }
  }
};
</script>
<style  lang="less" scoped>
.demo-form-inline {
  border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>